import React from 'react';
import { Spin, Card } from 'antd';
import routerReplace from '@/utils/routerReplace';

import Overview from './Overview';
import Progress from './Progress';
import Analyse from './Analyse';
import Portrayal from './Portrayal';
import Structure from './Structure';
import useTreeSelectData from '../../../hooks/useTreeSelectData';

import TreeSelectPro from '../../../components/TreeSelectPro/TreeSelectPro';

const HR = ({ location }) => {
    const { query } = location;
    const [companyTree, companyTreeLoading] = useTreeSelectData('company');
    const user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {};
    const [companyId, setCompanyId] = React.useState(query.companyId || user.companyId);
    const props = { companyId, user };

    const handleCompanyChange = val => {
        routerReplace({ query: { companyId: val } });
        setCompanyId(val);
    };

    return (
        <div style={{ padding: '12px 16px 16px 16px' }}>
            <Card style={{ marginBottom: 12 }} bordered={false}>
                <Spin spinning={companyTreeLoading}>
                    <TreeSelectPro
                        showSearch
                        treeDefaultExpandAll
                        style={{ width: 160 }}
                        value={companyId}
                        onChange={handleCompanyChange}
                        treeData={companyTree}
                    />
                </Spin>
            </Card>
            <Overview {...props} />
            <Progress {...props} />
            <Analyse {...props} />
            <Portrayal {...props} />
            <Structure {...props} />
        </div>
    );
};

export default HR;
